<script>
export default {
  name: "ImeDisabledInput",
  directives: {
    focus: {
      // directive definition
      inserted: function(el) {
        el.focus()
      }
    }
  },
  props: {
    modelValue:{
      type: [String, Number],
      default: ""
    },
    placeholder: {
      type: [String, Number],
      default: ""
    },
    focus: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      val:"",
      focused:false,
    }
  },
  watch: {
    focus() {
      this.$nextTick(() => {
        this.focused = this.focus
        this.focusShow = this.focus
      })
    },
    modelValue: {
      deep: true,
      immediate: true,
      handler(v) {
        this.$set(this, "val", v)
      }
    },
    val: {
      deep: true,
      handler(value) {
        this.$emit("input", value)
        this.$emit("update:modelValue", value)
      }
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.focused = this.focus
      this.focusShow = this.focus
    })
  },
  methods: {
    /**
     * 外部调用方法
     * 获取焦点时触发
     * @param {Object} event
     */
    onFocus() {
      this.$nextTick(() => {
        this.focused = true
      })
      this.$emit('focus', null);
    },

    _Focus(event) {
      this.focusShow = true
      this.$emit('focus', event);
    },

    /**
     * 外部调用方法
     * 失去焦点时触发
     * @param {Object} event
     */
    onBlur() {
      this.focused = false
      this.$emit('focus', null);
    },
    _Blur(event) {
      let value = event.detail.value;
      this.focusShow = false
      this.$emit('blur', event);
      // 根据类型返回值，在event中获取的值理论上讲都是string
      if (this.isEnter === false) {
        this.$emit('change', this.val)
      }
    }
  },

}
</script>

<template>
  <div class="ime-disabled-input">
    <div class="input-inner">
      <input class="focus-input __input" v-model="val" autocomplete="false"   adjust-position  type="password" />
      <input class="input-value __input" v-model="val" autocomplete="false"
             adjust-position
             :placeholder="placeholder"
             @focus="_Focus"
             @blur="_Blur"
             :focus="focused"
      >
    </div>
  </div>
</template>

<style scoped lang="scss">
.ime-disabled-input {
  .__input{
    border: 1px solid #e5e5e5;
    height: 35px;
    border-radius: 4px;
    font-size: 14px;
    padding: 0 15px;
    font-family: monospace;
  }
  .input-inner {
    position: relative;

    .input-value {
      position: absolute;
      top: 0;
      left: 0px;
      z-index: 2;
      font-size: 14px;
      padding: 0 15px;
      background-color: rgb(0, 0, 0, 0);
      outline: 0;
      border: none;
      width: 100%;
      height: 100%;
      pointer-events: none;
      font-family: monospace;
      color: #606266;

      &::selection {
        color: white;
      }

      ::v-deep .input-placeholder {
        color: #c0c4cc;
        font-size: 12px !important;
        font-family: monospace;
      }
    }

    .focus-input {
      z-index: 1;

      ::v-deep .el-input__inner {
        color: rgb(0, 0, 0, 0) !important;
        caret-color: #606266;
        font-size: 14px !important;
        font-family: monospace;

        &::selection {
          background-color: #0ba1f8;
        }
      }

      -webkit-text-fill-color: rgb(0, 0, 0, 0) !important;

      &::selection + .input-value {
        color: white;
      }
    }

    .text-input {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
    }
  }
}
</style>
